<template>
  <div class="reset_container">
    <p>找回密码</p>
    <div class="resetForm">
      <mt-field v-model="captcha" placeholder="请输入验证码">
        <mt-button :disabled="capBtnDisabled" @click="getCaptcha" class="captcha" :class="{ active: isActive }">{{capBtnText}}</mt-button>
      </mt-field>
      <mt-field :state="pwsState" placeholder="请设置登入密码(8~20个数字、字母和特殊字符号)" type="password" v-model="password"></mt-field>
      <mt-button @click="complete" class="registerBtn" type="primary">完成</mt-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      // 输入的验证码
      captcha: '',
      password: '',
      pwsState: '',
      // 验证码按钮上的提示文本
      capBtnText: '获取验证码',
      // isActive 类是否有效
      isActive: false,
      // 验证码按钮是否不可用
      capBtnDisabled: false
    }
  },
  created () {},
  methods: {
    // 获取验证码
    getCaptcha () {
      // 调用获取验证码的接口
      console.log('调用获取验证码的接口')
      // 将 发送验证码按钮 禁用
      this.capBtnDisabled = true
      // 调用 倒计时 方法
      this.countDown()
    },
    // 当点击 获取验证码按钮时 将按钮 active类的isActive修改为true 并开始倒计时
    countDown () {
      // 倒计时时间
      let timer = 5
      const timerId = setInterval(() => {
        if (timer === 0) {
          clearInterval(timerId)
          this.capBtnText = '获取验证码'
          this.isActive = false
          // 将 发送验证码按钮 启用
          this.capBtnDisabled = false
        } else {
          this.capBtnText = '重新发送(' + timer + ')'
          timer--
          this.isActive = true
        }
      }, 1000)
    },
    // 点击完成按钮
    complete () {
      // 判断用户输入的表单项是否符合格式要求
      if (this.pwsState !== 'success') {
        Toast({
          message: '表单项格式不正确',
          position: 'bottom',
          duration: 3000
        })
      }
      // 拼接请求参数对象

      //
    }
  },
  watch: {
    password: function (val) {
      const length = val.trim().length
      if (length >= 8 && length <= 20) {
        this.pwsState = 'success'
      } else {
        this.pwsState = 'error'
      }
    }
  }

}
</script>

<style lang="less" scoped>
  .reset_container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 25px;

    p {
      margin-top: 76px;
      text-align: center;
      font-size: 19px;
      font-weight: 700;
      color: #333;
    }
  }
  // 重置密码表单块
  .resetForm {
    margin-top: 20px;

    /deep/ .mint-cell-wrapper {
      background-position: bottom;
    }

    /deep/ input {
      font-size: 13px;
    }

    /deep/ input::-webkit-input-placeholder {
      font-size: 13px;
      color: #CCCCCC;
    }
  }
  .captcha {
    margin-right: 20px;
    font-size: 13px;
    color: #F59E0E;
    box-shadow: none;
  }
  .active {
    color: rgb(153, 153, 153);
  }

  .registerBtn {
    margin-top: 25px;
    width: 100%;
    font-size: 14px;
    background-color: #F59E0E;
  }
</style>
